<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>博客</title>

    <!-- Bootstrap -->
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
    <style>
        .word-style {
            color: #ffffff;
            cursor: default;
            font-family: Arial;
            font-size: 3em;
        }
    </style>

    <script>
        window.onload = function () {
            var bt = document.getElementById("delete");
            bt.onclick = function () {
                if (confirm("真的要删除吗?")) {
                    return true;
                } else {
                    return false;
                }
            }
        }
    </script>
</head>
<body onload="printer();printer2();" style="margin: 0 0">


<div th:replace="~{commons::navbar('dashboard')}"></div>
<!--background: url('./img/img.jpg') center center / cover no-repeat;-->
<div style="background-image: url('./img/final.jpg');background-repeat: no-repeat;background-size:100% 100%;
      transform: translate3d(0px, 0px, 0px);margin: 0 0;height: 500px">
    <div style="background-color: rgba(0, 0, 0, 0.1);height: 100%">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="mask flex-center">
            <h1 th:text="${article.getTitle()}" class="word-style" align="center">文本自动输出</h1>
            <br>
            <br>
            <div style="text-align: center">
                <span id="text222" class="word-style" style="font-size: 28px;"></span>
                <span id="text333" class="word-style" style="font-size: 28px;"> _</span>
            </div>
            <hr width="400" color="white">
        </div>

    </div>
</div>
<div class="container" style="margin-top: -2em">
    <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-10 col-md-10 col-sm-10 col-xm-12">
        <div style="box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);padding: 3em;background-color: #fff;
    border-radius: 0.5rem;">
<!--            <h2 th:text="${article.getTitle()}" style="font-weight: bold">C++和Java都能干的事情一定要用Java，否则才用C++</h2>-->
            <div class="row" style="margin-left: 2em">

                <div style="display: flex;">
                    <div>
                        <a th:href="@{/manage(uid=${article.getUid()})}" style="display: inline-block">
                            <img th:src="@{${avatar}}" class="img-circle" width="45" height="45" alt="">
                        </a>
                    </div>
                    <a th:href="@{/manage(uid=${article.getUid()})}" th:text="${article.getName()}"
                       style="line-height: 45px;margin-left: 10px">陈大侠</a>
                    <div style="margin-left: 3em;line-height: 45px;display: inline-block">
                        <a href="" type="button" style="background-color: #0084ff;color: white;"
                           class="btn btn-default btn-sm">
                            关注Ta
                        </a>
                    </div>
                </div>
                <div>
                    <span th:text="${article.getAgree()+' 人赞同了该文章'}"
                          style="font-weight: lighter;font-size: 12px"></span>
                </div>
            </div>
            <div class="row" style="margin-top: 1em;">
                <div id="test-editormd-view">
                    <textarea style="display:none;" th:text="${article.getContent()}"
                              name="test-editormd-markdown-doc"></textarea>
                </div>
            </div>
            <div class="row" style="padding: 1em">

                <span th:text="${'发布于'+#dates.format(article.getDate(),'yyyy-MM-dd HH:mm:ss')}"
                      style="font-weight: lighter;font-size: 12px">发布于昨天 10:08</span>
                <div class="row" style="margin-top: 20px">
                    <button th:onclick="'javascript:agree('+${article.getId()}+',this);'" type="button"
                            class="btn btn-default btn-sm" style="color: #0084ff;margin-left: 1em">
                        <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> <span
                            th:text="'赞同'+${article.getAgree()}"></span>
                    </button>

                    <a th:href="@{/detail#a1(id=${article.getId()})}" class="btn btn-link btn-sm"
                       style="color: #8590a6;">
                        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 添加评论
                    </a>
                    <button th:id="${'star'+article.getId()}"
                            th:onclick="'javascript:star('+${article.getId()}+',this);'" class="btn btn-link btn-sm"
                            style="color: #8590a6;">
                        <span th:if="${!article.isStar}" class="glyphicon glyphicon-star" aria-hidden="true"></span>
                        <span th:if="${!article.isStar}">收藏</span>
                        <span th:if="${article.isStar}" style="color: #0084ff" class="glyphicon glyphicon-star"
                              aria-hidden="true"></span> <span th:if="${article.isStar}"
                                                               style="color: #0084ff">收藏</span>
                    </button>

                    <button th:id="${'agree'+article.getId()}"
                            th:onclick="'javascript:agree('+${article.getId()}+',this);'" class="btn btn-link btn-sm"
                            style="color: #8590a6;">
                        <span th:if="${!article.isAgree}" class="glyphicon glyphicon-heart" aria-hidden="true"></span>
                        <span th:if="${!article.isAgree}">喜欢</span>
                        <span th:if="${article.isAgree}" style="color: #0084ff" class="glyphicon glyphicon-heart"
                              aria-hidden="true"></span> <span th:if="${article.isAgree}"
                                                               style="color: #0084ff">喜欢</span>
                    </button>
                    <span th:if="${session.get('user')!=null&&session.get('user').id==article.getUid()}"
                          class="dropdown">
                            <button style="border: none" class="btn btn-default dropdown-toggle" type="button"
                                    id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li><a th:href="@{/user/addArticle(id=${article.getId()})}">编辑</a></li>
                                <li><a id="delete"
                                       th:href="@{/user/deleteArticle2(id=${article.getId()},location='dashboard')}">删除</a></li>
                            </ul>
                        </span>
                </div>
            </div>
            <br>
            <br>

            <form th:action="@{/user/comment}" method="post">
                <input name="aid" hidden="hidden" th:value="${article.getId()}" type="text">
                <textarea name="content" class="form-control" rows="2" placeholder="请输入评论..."></textarea>
                <div class="text-right">
                    <button style="margin-top: 5px;background-color: white;border: #0084ff solid 1px;color: #0084ff"
                            type="submit" class="btn btn-default">提交
                    </button>
                </div>
            </form>
            <br>
            <br>

            <a id="a1" href="#"></a>
            <div style="background-color: #f8f8f8;border-radius: 5px;padding: 10px 10px 10px 10px">
                <div th:each="comment:${comments}">
                    <span style="font-weight: bold" th:text="${comment.getName()}"></span>
                    <span th:if="${#strings.isEmpty(comment.getToname())}">评论：</span>
                    <span th:if="${!#strings.isEmpty(comment.getToname())}">
                    回复 <span style="font-weight: bold" th:text="${comment.getToname()}"></span>：
                </span>
                    <span th:text="${comment.getContent()}"></span>
                    <br>
                    <span>
                    <span style="color: #01a0e4" class="glyphicon glyphicon-time"></span>
                    <span th:text="${#dates.format(comment.getDate(),'yyyy-MM-dd HH:mm:ss')}"></span>
                    <button th:onclick="huifu([[${'mx'+comment.getId()}]],this)" style="margin-top: 5px;color: #0084ff"
                            class="btn btn-link">回复</button>
                    <div hidden="hidden" th:id="${'mx'+comment.getId()}">
                        <form th:action="@{/user/comment}" method="post">
                            <input name="aid" th:value="${article.getId()}" type="text" hidden>
                            <input name="toname" th:value="${comment.getName()}" type="text" hidden>
                            <textarea name="content" class="form-control" rows="2" placeholder="请输入回复..."></textarea>
                            <div class="text-right">
                                <button style="margin-top: 5px;background-color: white;border: #0084ff solid 1px;color: #0084ff"
                                        type="submit" class="btn btn-default">提交</button>
                            </div>
                        </form>
                    </div>
                </span>
                    <hr>
                </div>
            </div>
            <br>
            <br>
        </div>

    </div>
</div>
<br>
<br>
<footer class="text-center" style="width: 100%;
            height: 40px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(18,18,18,.1);
            color: black">
    备案/许可证编号为：鄂ICP备2020018205号 <br>
    Copyright@2020-2020MinXuDesigened by MinXu
</footer>
<div id="live2d-widget" class="hidden-xs img-responsive">
    <canvas id="live2dcanvas"></canvas>
</div>

<script type="text/javascript">
    console.log("aaaaaaaaa")
    //获取textarea对象
    var text = document.getElementById("text222");
    var text2 = document.getElementById("text333");
    //要输出的内容
    var str = "一个懒狗程序猿的救赎";
    var pos = 0;
    var flag = true;
    const sleep = time => {
        return new Promise(resolve => setTimeout(resolve, time))
    }
    printer()
    printer2()
    //利用递归和setTimeout()实现文字输出
    function printer() {
        console.log("aaaaaa")
        text.innerText = str.substring(0, pos);
        //判断是否到达结尾.如果是则一秒后再来一遍.
        if (pos++ > str.length) {
            pos = 0;
            setTimeout("printer()", 2500);
        } else {
            setTimeout("printer()", 200);
        }
    }

    function printer2() {
        //判断是否到达结尾.如果是则一秒后再来一遍.
        if (flag)
            text2.style.opacity = 1
        else
            text2.style.opacity = 0
        flag = !flag
        setTimeout("printer2()", 400)

    }


</script>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./js/bootstrap.js"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
<script th:src="@{/js/xiantiao.js}"></script>

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-koharu/assets/koharu.model.json",//这里改模型，前面后面都要改
            "scale": 1
        },
        "display": {
            "position": "right",//设置看板娘的上下左右位置
            "width": 100,
            "height": 250,
            "hOffset": 30,
            "vOffset": 40
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.8,//设置透明度
            "opacityOnHover": 0.2
        }
    });
    window.onload = function () {
        $("#live2dcanvas").attr("style", "position: fixed; opacity: 0.7; left: 170px; bottom: 0px; z-index: 1; pointer-events: none;")
    }
</script>
<script th:inline="javascript">

    function star(id) {
        console.log(id);
        var user = '[[${session.user}]]';
        let str = JSON.stringify(user);
        console.log(str)
        console.log(str.length)
        console.log(str.length === 6)
        if (str.length === 6) {
            alert("请先登录");
            return;
        }
        $.ajax({
            type: "get",
            url: "/star",
            data: {aid: id},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log("收藏成功");
                    console.log("star" + id);
                    document.getElementById("star" + id).innerHTML = "<span style=\"color: #0084ff\" class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span> <span style=\"color: #0084ff\">收藏</span>"
                } else {
                    console.log("收藏失败");
                    document.getElementById("star" + id).innerHTML = "<span class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span> <span>收藏</span>"
                }
            }
        });
    }

    function agree(id) {
        console.log(id);
        var user = '[[${session.user}]]';
        let str = JSON.stringify(user);
        if (str.length === 6) {
            alert("请先登录");
            return;
        }
        $.ajax({
            type: "get",
            url: "/agree",
            data: {aid: id},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log("点赞成功");
                    console.log("agree" + id);
                    document.getElementById("agree" + id).innerHTML = "<span style=\"color: #0084ff\" class=\"glyphicon glyphicon-heart\" aria-hidden=\"true\"></span> <span style=\"color: #0084ff\">喜欢</span>"
                } else {
                    console.log("点赞失败");
                    document.getElementById("agree" + id).innerHTML = "<span class=\"glyphicon glyphicon-heart\" aria-hidden=\"true\"></span> <span>喜欢</span>"
                }
            }
        });
    }
</script>
<script type="text/javascript">
    function huifu(str) {
        var str1 = "#" + str;
        console.log(str1);
        //$(str1).toggle("slow");
        $(str1).slideToggle("slow");
    }

    testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
        htmlDecode: "style,script,iframe",  // you can filter tags decode
        emoji: true,
        taskList: true,
        tex: true,  // 默认不解析
        flowChart: true,  // 默认不解析
        sequenceDiagram: true,  // 默认不解析
    });
</script>

</body>
</html>